<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="demo">
        <School></School>
        <hr>
        </hr>
        <Person></Person>
    </div>
</body>

<script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false
    //第一步:创建一个School组件
    const School = Vue.extend({
        template: `
            <div>
                <h2>学校名称:{{sname}}</h2>
                <h2>学校地址:{{address}}</h2>
                <button @click="sname+='~'">修改学校名</button>
                <button @click="welcome">欢迎新同学</button>
            </div>`,
        data() {
            return {
                sname: '尚硅谷',
                address: '宏福科技园',
            }
        },
        methods: {
            welcome() {
                alert(`${this.sname}欢迎你!`)
            }
        },
    })
    //第一步创建一个Person组件
    const Person = Vue.extend({
        template: `
        <div>
            <h2>人名:{{pname}}</h2>
            <h2>年龄:{{age}}</h2>
            <button @click = "age++"> 年龄+1</button>
            <button @click = "speak">说话</button>
        </div>`,
        data(){
            return{
                pname:'张三',
                age:18
            }
        },
        methods:{
            speak(){
                alert('十一来了,我要好好学习!')
            }
        }
    })
    //创建vm (它是整个应用的大哥,而且有只能有一个)
    new Vue({
        el:'#demo',
        components:{
            School,
            Person
        }
    })
</script>

</html>